<template>
    <div>
        <div>
            <div class="top">
                <div>
                    <span>聘用形式:</span>
                    <div>
                        <el-checkbox-group v-model="checked2" size="large">
                            <el-checkbox :label="item.name=='1'?'正式':'非正式'" :value="item.name" v-for="item in val" :key="item.id" @change="change(item.id)"/>
                            <!-- <el-checkbox :label="val2" :value="val2" /> -->
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <div class="top">
                <div>
                    <span>部门:</span>
                    <div>
                        <el-checkbox-group v-model="checked1" size="large">
                            <el-checkbox :label="item.name" :value="item.id" v-for="item in Bm" :key="item.id"
                                @change="change(item.id)" />
                        </el-checkbox-group>
                    </div>
                </div>
            </div>

        </div>
        <el-table :data="data" height="auto" style="width: 100%" @row-click="go">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column prop="formOfEmployment" label="聘用形式" />
            <el-table-column prop="departmentName" label="部门" />
            <el-table-column prop="timeOfEntry" label="入职时间" />

            <el-table-column prop="currentBasicSalary" label="工资基数" />
            <el-table-column prop="subsidyName" label="津贴方案" />
            <el-table-column label="操作" width="180px">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        定薪
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getSocial, getCity, getBm, Salary } from '../api/axios.js'
import { useRouter } from 'vue-router';
const val=ref([
    {
        id:1,
        name:1
    },
    {
        id:2,
        name:2
    }
])


const checked1 = ref([])
const checked2 = ref([])
// const checked3 = ref([])
let data = ref([])
let city = ref([])
let Bm = ref([])
let departmentChecks = ref([])
let approvalsTypeChecks = ref([])
// let providentFundChecks = ref([])
let page = ref('1')
let pageSize = ref('10')
let py=ref([])
const change = async (i) => {
    console.log(checked1.value,'5445445456');
    departmentChecks.value = checked1.value
    approvalsTypeChecks.value = checked2.value
    // providentFundChecks.value = checked3.value
    let obj = {
        page: page.value,
        pageSize: pageSize.value,
        departmentChecks: departmentChecks.value,
        approvalsTypeChecks: approvalsTypeChecks.value,
        // providentFundChecks: providentFundChecks.value
    }
    console.log(page.value,pageSize.value,departmentChecks.value,approvalsTypeChecks.value);
    // let res = await Salary(obj)
    let res = await Salary(page,pageSize,departmentChecks,approvalsTypeChecks)
    data.value = res.data.data.rows
}
const router = useRouter()
let go = (row) => {
    console.log(row);
    router.push(`/socialD?id=${row.id}`)
};

const get = async () => {
    let res = await Salary()
    // let res1 = await getCity()
    let res2 = await getBm()
    console.log(res.data.data);
    data.value = res.data.data.rows
    // city.value = res1.data.data
    Bm.value = res2.data.data
}

onMounted(() => {
    get()
})

</script>

<style scoped>
.top {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
}

.top li {
    list-style: none;
    margin: 20px 10px;

}
</style>